<template>
    <div>
        <!--mui组件：media-list-->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-media" v-for="(info,i) in newsList" :key="i">
                <router-link :to="'/home/newsList/detail/'+info.title">
                    <img class="" :src="'http://psrecycle.oss-cn-hangzhou.aliyuncs.com/recycle/idcard/'+info.plate1_img">
                    <div class="">
                        {{info.title}}
                        <p class="">发表时间：{{info.title_banner_txt_time}}</p>
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>
<script>
    import {Toast} from 'mint-ui'
    export default {
        data(){
            return{
                newsList:[],
            }
        },
        methods:{
            getList(){
               this.$http.get("http://118.25.40.54:3000/apitext")
                   .then(info=>{
                       if(info.body!==undefined)
                       {
                           this.newsList = info.body.data;
                       }else{
                           Toast("获取数据失败。。。");
                       }
                   })
            }
        },
        created(){
            this.getList();
        }
    }

</script>
<style scoped>
    .mui-table-view>li{
        height: 150px;
        margin: 5px 0;
    }
    .mui-table-view>li>a{
        height: 100%;
    }
    .mui-table-view>li>a>img{
        position: absolute;
        overflow: hidden;
        height: 80%;
        width: 100px !important; ;
    }
    .mui-table-view>li>a>div{
        position: absolute;
        left: 120px;
        height: 100px;
        font-size: 30px;
        width: 800px;
        margin-top: 20px;
        padding-left: 30px;
    }
    .mui-table-view>li>a>div>p{
        font-size: 20px;
        word-wrap: break-word;
        margin-top: 30px;
        padding-left: 10px;
    }

</style>